@extends('admin.common.admin')

@section('cnt')
    {{-- 面包屑导航 --}}
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 房源属性管理
        <span class="c-gray en">&gt;</span> 添加房源属性
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
           href="javascript:location.replace(location.href);" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="page-container">
        {{-- 消息提示 --}}
        @include('admin.common.msg')

        <form class="form form-horizontal" id="addform" method="post" action="{{ route('admin.fangattr.store') }}">
            @csrf
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>房源属性级别：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <span class="select-box" style="width: 200px">
				<select id="pid" name="pid" class="select">
                    <option value="0">==请选择顶级属性==</option>
                    @foreach($pData as $item)
                        <option value="{{ $item->id }}">{{ $item->name}}</option>
                    @endforeach
				</select>
				</span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源属性名称：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('name') }}" name="name">
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2">房源属性字段名：</label>
                <div class="formControls col-sm-10">
                    <input type="text" autocomplete="off" class="input-text" value="{{ old('field_name') }}"
                           name="field_name">
                    <span>仅为顶级属性时才须填写房源属性字段名</span>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-sm-2"><span class="c-red">*</span>房源属性图标：</label>
                <div class="formControls col-sm-10">
                    <div id="picker">选择图标</div>
                    <input type="hidden" name="icon" id="pic">
                    <img src="" id="showpic" style="width: 100px;">
                </div>
            </div>
            <div class="row cl">
                <div class="col-sm-10 col-sm-offset-2">
                    <input class="btn btn-primary radius" type="submit" value="添加房源属性">
                </div>
            </div>
        </form>
    </article>
@endsection
@section('css')
    <link rel="stylesheet" href="/admin/lib/webuploader/0.1.5/webuploader.css"/>
@endsection
@section('js')
    {{--富文本js引入--}}
    <script src="/admin/lib/ueditor/1.4.3/ueditor.config.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/ueditor.all.min.js"></script>
    <script src="/admin/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
    {{--异步文件上传插件js--}}
    <script src="/admin/lib/webuploader/0.1.5/webuploader.min.js"></script>
    <script>
        // 用于csrf验证的
        const TOKEN = "{{ csrf_token() }}";
        // 异步文件上传 发起POST请求 post触发csrf验证
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传
            auto: true,
            // swf文件路径
            swf: '/admin/lib/webuploader/0.1.5/Uploader.swf',
            // 上传文件处理的后台路由
            server: "{{ route('admin.fangattr.upfile') }}",
            // 选择文件的按钮。可选。
            pick: '#picker',
            // 额外参数
            formData: {
                _token: TOKEN,
                node:"attr"
            },
            // 表单域名称
            fileVal: 'file',
            // 压缩
            resize: true,
            // 只上传图片
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 回调方法 上传成功后完成的方法
        uploader.on('uploadSuccess', function (file, response) {
            $('#pic').val(response.pic)
            $('#showpic').attr('src', response.pic)
        });
        // 表单验证
        $("#addform").validate({
            // 验证规则
            rules: {
                name: {
                    required: true
                }
            },
            // 取消回车事件
            onkeyup: false,
            // 验证成功时的样式名称
            success: "valid",
            // 验证成功后，回调事件  form dom对象
            submitHandler: function (form) {
                // js 表单提交
                form.submit();
            }
        });
    </script>
@endsection

